<template>
  <div class="awsCenter">
    <div style="border: black 0px solid;width: 100%;height: 550px;display: flex;
flex-direction: column;
align-items: center;">
      <!--    按钮栏    -->
      <div class="awsCenter" style="width: 100%;height: 40px;border: black 0px solid">
        <div style="width: 40%;display: flex;flex-direction: row;margin-left: auto">
          <el-date-picker
            v-model="dateTimeRange"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
          <el-button @click="getCounselor()" style="width: 80px;margin-left: 10px" type="primary" plain>查询</el-button>
        </div>


      </div>


      <!--   表格    -->
      <el-table  :data="bookingData" stripe style="width: 100%;margin-top: 20px" >
        <el-table-column  width="55" />

        <el-table-column prop="userRealname" label="来访者" width="200px"/>
        <el-table-column prop="counselorname" label="咨询师" width="200px"/>
        <el-table-column prop="weekend" label="预约星期" />
        <el-table-column prop="times" label="咨询时间段" />
        <el-table-column prop="room" label="地点" />
        <el-table-column prop="status" label="预约状态">
          <template v-slot="{ row }">
            <el-tag :type="formatStatus(row)">{{row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdat" label="预约时间" width="200"/>

      </el-table>

      <!-- 分页条 -->
      <div  class="demo-pagination-block">
        <el-pagination
          style="margin-top: 20px"
          v-model:current-page="currentPage"
          :page-size="8"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>




    </div>
  </div>
</template>

<script lang="ts" setup>

import { Delete, Edit } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getBookingService } from '@/api/booking.js'
import { type ComponentSize, ElMessage } from 'element-plus'
import moment from 'moment/moment'

const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const bookingData=ref([])


const formatStatus=((row)=>{
  if (row.status==='已预约'){
    return 'primary'
  }else if(row.status==='已完成'){
    return 'success'
  }else if (row.status==='已取消'){
    return 'error'
  }
})
const dateTimeRange=ref(null)
onMounted(async ()=>{

  //获取列表信息
  const res=await getBookingService(getBookingDto.value)
  if (res.code===200){
    bookingDataFormat(res.data.data)
    total.value=res.data.total
    dateFormat()
  }

})
function convertStatus(status){
  let value=''
  const list=[{
    label:'scheduled',
    value:'已预约',
    type:'primary'
  },
    {
      label:'completed',
      value:'已完成',
      type:'success'
    },
    {
      label:'canceled',
      value:'已取消',
      type:'error'
    },
  ]
  list.forEach(item=>{
    if (item.label==status){
      value=item.value
    }
  })
  return value
}
function convertToWeekday(num) {
  const weekdays = ['星期一', '星期二', '星期三', '星期四', '星期五'];

  // 确保输入在 1 到 5 之间
  if (num >= 1 && num <= 5) {
    return weekdays[num - 1];
  }
}
const bookingDataFormat=((data)=>{
  data.forEach(item=>{
    //转换星期
    item.weekend=convertToWeekday(item.weekend)

    //转换状态
    item.status=convertStatus(item.status)

    let str=item.createdat.toString().split('T')
    item.createdat=str[0]+" "+str[1].split(".")[0]

  })
  bookingData.value=data


})
const dateFormat=(()=>{

  bookingData.value.forEach(item=>{
    item.createdat=moment(item.createdat).format('YYYY-MM-DD HH:mm:ss');
    item.updatedat=moment(item.updatedat).format('YYYY-MM-DD HH:mm:ss');
  })
})

const total=ref(0)
const currentPage = ref(1)
const getBookingDto = ref({
  current: currentPage.value,
  pageSize: 8,
  dateTimeRange:null
})
//查询
const getCounselor=(async ()=>{
  getBookingDto.value={
    current: currentPage.value,
    pageSize: 8,
    dateTimeRange:dateTimeRange.value
  }
  console.log(getBookingDto.value)
  //获取列表信息
  const res=await getBookingService(getBookingDto.value)
  if (res.code===200){
    bookingDataFormat(res.data.data)
    total.value=res.data.total
    dateFormat()
  }
})

const handleCurrentChange = async (val: number) => {
  getBookingDto.value={
    current: currentPage.value,
    pageSize: 8,
    dateTimeRange:dateTimeRange.value
  }
  //获取列表信息
  const res=await getBookingService(getBookingDto.value)
  if (res.code===200){
    bookingDataFormat(res.data.data)
    total.value=res.data.total
    dateFormat()
  }

}


</script>

<style>

</style>
